<template>
  <div class="page-header-index-wide">
    <a-row :gutter="24">
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <a-card :loading="loading" @click="toSensors()">
          <a-statistic
            title="综合气象站总数"
            :value="deviceInfo.st"
            :precision="0"
            suffix="个"
            :value-style="{ color: '#003366' }"
            style="margin-right: 50px"
          >
            <template #prefix>
              <a-icon type="number" />
            </template>
          </a-statistic>
        </a-card>
        <!-- <chart-card :loading="loading" title="设备总数" :total="deviceInfo.deviceTotal+''">
          <template slot="footer">当日新增数量<span>{{deviceInfo.deviceInstallCountTody}}</span></template>
        </chart-card> -->
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">

        <a-card :loading="loading" @click="toSensors('ONLINE')">
          <a-statistic
            title="综合气象站在线数"
            :value="deviceInfo.son | NumberFormat"
            :precision="0"
            suffix="个"
            :value-style="{ color: '#3f8600 ' }"
            style="margin-right: 50px"
          >
            <template #prefix>
              <a-icon type="rise" />
            </template>
          </a-statistic>
        </a-card>
        <!-- <chart-card :loading="loading" title="在线设备" :total="deviceInfo.onlineCount | NumberFormat" >
          
          <div>
            <mini-area :dataSource="miniAreaDatas" />
          </div>
          <template slot="footer">亏电数量<span> {{ deviceInfo.lowPowerCount | NumberFormat }}</span></template>
        </chart-card> -->
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">

        <a-card :loading="loading" @click="toSensors('OFFLINE')">
          <a-statistic
            title="综合气象站离线数"
            :value="deviceInfo.soff | NumberFormat"
            :precision="0"
            suffix="个"
            :value-style="{ color: '#cc3300' }"
            style="margin-right: 50px"
          >
            <template #prefix>
              <a-icon type="fall" />
            </template>
          </a-statistic>
        </a-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">

        <a-card :loading="loading">
          <a-statistic
            title="综合气象站稳定率"
            :value="deviceInfo.sp"
            :precision="2"
            suffix=""
            :value-style="{ color: '#003366' }"
            style="margin-right: 50px"
          >
            <template #prefix>
              <a-icon type="percentage" />
            </template>
          </a-statistic>
        </a-card>
      </a-col>
    </a-row>








  </div>
</template>

<script>
import ChartCard from '@/components/ChartCard'
import ACol from 'ant-design-vue/es/grid/Col'
import ATooltip from 'ant-design-vue/es/tooltip/Tooltip'
import MiniArea from '@/components/chart/MiniArea'
import MiniBar from '@/components/chart/MiniBar'
import MiniProgress from '@/components/chart/MiniProgress'
import RankList from '@/components/chart/RankList'
import Bar from '@/components/chart/Bar'
import LineChartMultid from '@/components/chart/LineChartMultid'
import HeadInfo from '@/components/tools/HeadInfo.vue'
import { JVXETable } from '@/components/jeecg/JVxeTable/utils/vxeUtils.js'
import Trend from '@/components/Trend'
import { getLoginfo, getVisitInfo } from '@/api/api'
import { deleteAction, getAction, putAction, downFile, getFileAccessHttpUrl, postAction } from '@/api/manage'
import { message } from 'ant-design-vue'
// import {filterMultiDictText} from '@/components/dict/JDictSelectUtil'
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
// import '@/assets/less/TableExpand.less'
// import MineTodoModal from '../task/modules/MineTodoModal'

const rankList = []
// var districts = ['闵行区','浦东新区','徐汇区','松江区','崇明区','长宁区','黄浦区']
// for (let i = 0; i < 7; i++) {
//   if (i === 0) {
//     rankList.push({
//       name: districts[i],
//       total: 10
//     })
//   } else {
//     rankList.push({
//       name: districts[i],
//       total: 0
//     })
//   }
// }
const barData = []
// for (let i = 0; i < 12; i += 1) {
//   if(i === 1) {
//     barData.push({
//       x: `${i + 1}月`,
//       y: 10
//     })
//   } else {
//     barData.push({
//       x: `${i + 1}月`,
//       y: 0
//     })
//   }

// }

export default {
  name: 'IndexChart',
  components: {
    ATooltip,
    ACol,
    ChartCard,
    MiniArea,
    MiniBar,
    MiniProgress,
    RankList,
    Bar,
    Trend,
    LineChartMultid,
    HeadInfo,
  },
  data() {
    return {
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0,
      },
      sipagination: {
        current: 1,
        pageSize: 999,
        pageSizeOptions: ['10'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0,
      },
      loading: true,
      center: null,
      rankList,
      barData,
      loginfo: {},
      visitFields: ['ip', 'visit'],
      visitInfo: [],
        deviceInfo:{},
      miniAreaDatas: [],
      miniBarDatas: [],
      indicator: <a-icon type="loading" style="font-size: 24px" spin />,
      dataSource: [],

    }
  },
  created() {
    setTimeout(() => {
      this.loading = !this.loading
    }, 1000)

    this.getDeviceInfo()

  },
  mounted() {
    // this.leftCenterMap()
    // this.mapBtn()
  },
  methods: {
  getDeviceInfo(){
    getAction("/com.pudong/pudongDeviceConfig/deviceInfo").then((res)=>{
      console.log(res)
      this.deviceInfo = res.result;
    })
  }



  },
}
</script>

<style lang="less" scoped>
.circle-cust {
  position: relative;
  top: 28px;
  left: -100%;
}
.extra-wrapper {
  line-height: 55px;
  padding-right: 24px;

  .extra-item {
    display: inline-block;
    margin-right: 24px;

    a {
      margin-left: 24px;
    }
  }
}

/* 首页访问量统计 */
.head-info {
  position: relative;
  text-align: left;
  padding: 0 32px 0 0;
  min-width: 125px;

  &.center {
    text-align: center;
    padding: 0 32px;
  }

  span {
    color: rgba(0, 0, 0, 0.45);
    display: inline-block;
    font-size: 0.95rem;
    line-height: 42px;
    margin-bottom: 4px;
  }
  p {
    line-height: 42px;
    margin: 0;
    a {
      font-weight: 600;
      font-size: 1rem;
    }
  }
}
.left {
  // display: flex;
  width: 100%;
  height: 600px;
  background-color: #fff;

  margin-bottom: 20px;
}

.aspins {
  // background-color: #000;
  background: rgba(0, 0, 0, 0);
}
</style>